<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"/>
        <title></title>
        <!-- IMPORT CSS -->
        <!-- <link rel="stylesheet" href="reset.min.css" /> -->
        <style>
            .tabBox {
                margin: 20px auto;
                width: 500px;
            }

            .tabBox .tab {
                position: relative;
                top: 1px;
            }

            .tabBox .tab li {
                float: left;
                margin-right: 10px;
                padding: 0 10px;
                height: 35px;
                line-height: 35px;
                font-size: 14px;
                border: 1px solid #aaa;
                background: #f6f7fb;
                cursor: pointer;
            }

            .tabBox .tab li.active {
                background: #fff;
                border-bottom-color: #fff;
            }

            .tabBox div {
                display: none;
                padding: 10px;
                height: 100px;
                border: 1px solid #aaa;
                background: #fff;
            }

            .tabBox div.active {
                display: block;
            }
        </style>
    </head>

    <body>
        <section class="tabBox" id="tabBox">
            <ul class="tab clearfix">
                <li class="active">编程</li>
                <li>读书</li>
                <li>运动</li>
            </ul>
            <div class="active">编程可以使我“赚取高薪”</div>
            <div>读书可以使我“修身养性”</div>
            <div>运动可以使我“身体健康”</div>
        </section>

       <section class="tabBox" id="tabBox2">
            <ul class="tab clearfix">
                <li class="active">编程</li>
                <li>读书</li>
                <li>运动</li>
            </ul>
            <div class="active">编程可以使我“赚取高薪”</div>
            <div>读书可以使我“修身养性”</div>
            <div>运动可以使我“身体健康”</div>
        </section>

        <section class="tabBox" id="tabBox3">
            <ul class="tab clearfix">
                <li class="active">编程</li>
                <li>读书</li>
                <li>运动</li>
            </ul>
            <div class="active">编程可以使我“赚取高薪”</div>
            <div>读书可以使我“修身养性”</div>
            <div>运动可以使我“身体健康”</div>
        </section>
        
    </body>
    <script src="jquery.min.js"></script>
    <script>
  //       $(".tab li").click(function(){
		// 	$(this).addClass("active").siblings().removeClass("active");
		// 	let index=$(this).index();
		// 	$(".tabBox div").eq(index).addClass("active").siblings().removeClass("active");
		// })
		
		$.fn.extend({
			tab(){
				let _this=this;//$("#tabBox") $("#tabBox2") $("#tabBox3")
				$("li",_this).click(function(){
					//this---》当前点击的元素
					$(this).addClass("active").siblings().removeClass("active");
					let index=$(this).index();
					$("div",_this).eq(index).addClass("active").siblings().removeClass("active");
				})
			}
		})
		
		$("#tabBox").tab();
		$("#tabBox2").tab();
		$("#tabBox3").tab();
    </script>
</html>
